import { useEffect, useState } from "react"
import s from "./style.module.less"
import {get} from "../../utils"
import cx from 'classnames';
const Home:React.FC = () => {
    const [active,setActive]=useState(1)
    const [list,setList]=useState([{
        id: 1,
        avatar: './img_avatar/a.png',
        date: '7:01',
        message: '好的。',
        name: '大头',
        number:3
    }])
    const [hiddenNumber,setHiddenNumber]=useState(new Set())
    useEffect(() => {
        GetMe()
    }, [])
    async function GetMe() {
        let {data} = await get(`/api/home`)    
        setList(data.list)
    }
    const handleButton=(key:number)=>{
        setActive(key)
        setHiddenNumber(hiddenNumber=>new Set(hiddenNumber).add(key))
        
    }

    // 辅助函数，用于截断message文本 处理message
    const truncateMessage = (message: string, maxLength: number = 20) => {
        return message.length > maxLength ? message.slice(0, maxLength) + '...' : message;
    };

    // 处理消息数量

    return <>
        <div className={s.home}>
            <div className={s.head}>
                <div className={s.head_title}>微信</div>
                <input className={s.head_input} type="text" placeholder="搜索" />
            </div>
            <div className={s.container}>
                {list.map(item=><div key={item.id} className={cx({[s.msItem]:true,  [s.active]: active === item.id })} onClick={()=>handleButton(item.id)}>
                    <img src={item.avatar}/>
                    <span className={s.name}>{item.name}</span>
                    <span className={s.date}>{item.date}</span>
                    <span className={s.message}>{truncateMessage(item.message)}</span>
                    <span className={!hiddenNumber.has(item.id)&&item.number>0?s.num:s.u}>{!hiddenNumber.has(item.id)&&item.number>0&&item.number}</span>
                </div>)}
            </div>
        </div>
    </>
}
export default Home